<!DOCTYPE html>
<html>
  <head>
    <title>queue-dequeue.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" src="../javascript/lib/jquery-1.9.1/jquery-1.9.1.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
		#animation{
			width:200px;
			height:200px;
			background:#ccc;
		}
		
		#queue { 
			margin:3px; width:40px; height:40px;
	        position:absolute; left:0px; top:30px; 
	        background:green; display:none; 
	    }
  		#queue.newcolor {
  			background:blue; 
  		}
		
	</style>
	<script type="text/javascript">
		$(function(){
			$("#animation").show("slow").fadeIn();
			$("#animation").queue(function(){
				//用1秒钟使宽度增加400
				$(this).animate({width:'+=400'},1000);
				$(this).dequeue();
			});
		});
		
		function danji(){
		    $("#queue").show("slow");
		    $("#queue").animate({left:'+=200'},2000);
		    $("#queue").queue(function(){
		     	$(this).addClass("newcolor");
				$(this).dequeue();
		 	});
		    $("#queue").animate({left:'-=200'},500);
		    $("#queue").queue(function () {
		      	$(this).removeClass("newcolor");
		     	$(this).dequeue();
		    });
		    $("#queue").slideUp();
		}
	</script>
  </head>
  
  <body onclick="danji()">
    <div id="animation" style="display:none;"></div>
         请单击这里(更好的描述了queue的使用方法)... ...
    <div id="queue" ></div>
  </body>
</html>
